<template>
	<view>
		<view class="p-10">
			<template v-for="(item,i) in list">
				<view class="item">
					<view class="flex m-between">
						<up-text :text="item.交换机型号" :lines="1" class="item-p" size="16" color="#333333" />
						<view>
							<u-count-to bold fontSize="18" separator="," color="#0052D9" :endVal="item.交换机个数" />
							<text class="unit">台</text>
						</view>
					</view>
					<view class="flex s-center m-t-4">
						<view class="f1 w0">
							<template v-for="(item2,i) in ['机房区域','交换机型号']">
								<view class="flex item-p">
									<view class="flex s-center">
										<up-text :text="`${item2}：`" color="#525866" size="14" />
									</view>
									<up-text :text="item[item2]" color="#7F899F" size="14" />
								</view>
							</template>
						</view>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script setup>
	import {
		getByApiCode,
	} from "@/api/customApi";

	const list = ref([])
	getByApiCode({
		apiCode: "jiaohuanjitongjixiangqing",
		pageIndex: 1,
		pageSize: 1000,
		propertyMapping: {
			交换机个数: "field_247584434814320640",
			交换机型号: "field_247583494660780038",
			机房区域: "field_247583494660780036",
			机柜编号: "field_247583494660780037",
		},
		total: true
	}).then((res) => {
		list.value = res.data;
	})
</script>

<style scoped lang="scss">
	.item {
		padding: 10px;
		background: #fff;
		border-radius: 8px;
		background-image: url('@/static/img/header.png');
		background-size: 100% auto;
		background-repeat: no-repeat;
		background-position: bottom;

		&-p {
			margin: 8rpx 0;
		}

		&+.item {
			margin-top: 20rpx;
		}
	}
</style>